<template>
  <div>
    <el-card style="text-align: left" class="box-card">
      <el-form
        ref="params"
        :label-position="'left'"
        label-width="100px"
        :model="params"
        :inline="true"
        size="small"
      >
        <el-form-item class="w-32" label="运单编号">
          <el-input v-model="params.id"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="运单状态">
          <el-select
            style="width: 188px"
            v-model="params.status"
            placeholder="请选择"
          >
            <el-option v-for="item in ydStatus" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      
        <el-form-item class="w-32" label="发件人姓名">
          <el-input v-model="params.senderName"></el-input>
        </el-form-item>

        <el-form-item class="w-32" label="发件人电话">
          <el-input v-model="params.senderPhone"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="发件人地址">
          <el-cascader
            size="small"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item class="w-32" label="收件人姓名">
          <el-input v-model="params.receiverName"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="收件人电话">
          <el-input v-model="params.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item class="w-32" label="收件人地址">
          <el-cascader
            size="small"
            :options="options"
            v-model="selectedOptions1"
            @change="handleChange1"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          icon="el-icon-search"
          @click="getTransportOrders()"
          type="primary"
          circle
        ></el-button>
        <el-button @click="resetForm('params')" style="width: 100px" size="small" class="ml-5"
          >重置</el-button
        >
      </div>
    </el-card>
    <el-divider> <b>订单列表</b> </el-divider>

    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="运单编号" width="150">
        </el-table-column>
        <el-table-column label="运单状态">
          <template scope="s">
            {{ydStatus1[s.row.status]}}
          </template>
        </el-table-column>
        <el-table-column label="调度状态" width="150"> 
          <template scope="s">
            {{s.row.schedulingStatus==1?"待调度":"已调度"}}
          </template>
        </el-table-column>
        <el-table-column prop="order.orderId" label="订单编号">
        </el-table-column>
        <el-table-column prop="order.createTime" label="下单时间">
        </el-table-column>
        <el-table-column prop="order.senderName" label="发件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="order.senderPhone" label="发件人电话" width="120">
        </el-table-column>
        <el-table-column prop="order.senderAddress" label="发件人地址" width="200">
          <template scope="scope"> 
              {{scope.row.order.senderProvinceId+" "+scope.row.order.senderCityId+" "+scope.row.order.senderCountyId+" "+scope.row.order.senderAddress}}
          </template>
        </el-table-column>
        <el-table-column prop="order.receiverName" label="收件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="order.receiverPhone" label="收件人电话" width="120">
        </el-table-column>
        <el-table-column prop="order.receiverAddress" label="收件人地址" width="200">
          <template scope="scope"> 
            {{scope.row.order.receiverProvinceId+" "+scope.row.order.receiverCityId+" "+scope.row.order.receiverCountyId+" "+scope.row.order.receiverAddress}}
          </template>
        </el-table-column>
        <el-table-column width="120px" fixed="right" label="操作">
          <template scope="s">
            <el-link @click="selTransportOrderDetails(s.row)" :underline="false" type="primary"
            >查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.num"
      :page-sizes="[3, 5, 10]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { getTransportOrders } from "@/api/zwj/transportOrderApi";

export default {
  data() {
    return {
      params: {
        orderId: "",
        status: "",
        senderName: "",
        senderPhone: "",
        receiverName: "",
        receiverPhone: "",
        senderProvinceId: "",
        senderCityId: "",
        senderCountyId: "",
        receiverProvinceId: "",
        receiverCityId: "",
        receiverCountyId: "",
        num: 1,
        size: 3,
      },
      total:0,
      options: regionData,
      selectedOptions: [],
      selectedOptions1: [],
      tableData: [],
      ydStatus:[{id:1,name:"新建"},{id:2,name:"已装车"},{id:3,name:"已装车"},{id:4,name:"到达终端网点"}],
      ydStatus1:["","新建","已装车","已装车","到达终端网点"]
    };
  },
  methods: {
    selTransportOrderDetails(transportOrder) {
      this.$router.push({name:"transportOrderDetails",params:{transportOrder}});
    },
    handleChange(value) {
      this.params.senderProvinceId = CodeToText[value[0]];
      this.params.senderCityId = CodeToText[value[1]];
      this.params.senderCountyId = CodeToText[value[2]];
    },
    handleChange1(value) {
      this.params.receiverProvinceId = CodeToText[value[0]];
      this.params.receiverCityId = CodeToText[value[1]];
      this.params.receiverCountyId = CodeToText[value[2]];
    },

    handleSizeChange(val){
      this.params.size=val;
      this.getTransportOrders();
    }, 
    handleCurrentChange(val){
      this.params.num=val;
      this.getTransportOrders();
    },
    getTransportOrders() {
      getTransportOrders(this.params, this.params.num, this.params.size).then((data) => {
        this.tableData = data.data.list;
        this.total=data.data.total
        console.log(this.tableData)
      });
    },
     resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  created() {
    this.getTransportOrders();
  },
};
</script>

<style>
.w-32 {
  width: 32%;
}
.w-33 {
  width: 33%;
}
.w-20 {
  width: 20%;
}
</style>